<!DOCTYPE html>
<html lang="zh">
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间轴</title>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="row animated fadeInRight">
    <div class="ibox float-e-margins">
<!--        <div class="text-center float-e-margins p-md">-->
<!--            <span>打开/关闭颜色/背景或方向版本: </span>-->
<!--            <a href="#" class="btn btn-xs btn-primary" id="lightVersion">轻型版本 </a>-->
<!--            <a href="#" class="btn btn-xs btn-primary" id="darkVersion">黑色版本 </a>-->
<!--        </div>-->
<!--        想显示工作流图片-->
<!--        <img src="../diagram/holiday.png" style="width: 100%;    height: 100%;"/>-->



        <form class="form-horizontal m" id="form-leave-edit" th:object="${activitiLeave}" style="display: none;">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="userName" th:field="*{userName}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">请假人id：</label>
                <div class="col-sm-8">
                    <input name="userId" th:field="*{userId}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">请假理由：</label>
                <div class="col-sm-8">
                    <input name="reason" th:field="*{reason}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="startTime" th:value="${#dates.format(activitiLeave.startTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">结束时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="endTime" th:value="${#dates.format(activitiLeave.endTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </form>

        <div id="ibox-content">
            <div id="vertical-timeline" class="vertical-container light-timeline">
                    <div class="vertical-timeline-block">
                        <div class="vertical-timeline-content" >
                            <h2 id="title"></h2>

                        </div>
                </div>
<!--                第一步提交请假-->
                <div class="vertical-timeline-block" id="divstep1">
                    <div class="vertical-timeline-icon navy-bg"><i class="fa fa-briefcase"></i></div>
                    <div class="vertical-timeline-content">
                        <h2>提交请假</h2><p>${content}</p>
                        <a href="#" class="btn btn-sm btn-primary" onclick="onClickOption(1)"> 审核操作</a>
                        <span class="vertical-date">
<!--                         <small>${datetime}</small>-->
                     </span>
                    </div>
                </div>
                <!--                第二部部门经理审批-->
                <div class="vertical-timeline-block" id="divstep2">
                    <div class="vertical-timeline-icon navy-bg"><i class="fa fa-briefcase"></i></div>
                    <div class="vertical-timeline-content">
                        <h2>部门经理审批</h2><p>${content}</p>
                        <a href="#" class="btn btn-sm btn-primary" onclick="onClickOption(2)"> 审核操作</a>
                        <span class="vertical-date">
                         <small>${datetime}</small>
                     </span>
                    </div>
                </div>
                <!--                第三步总经理审批-->
                <div class="vertical-timeline-block" id="divstep3">
                    <div class="vertical-timeline-icon navy-bg"><i class="fa fa-briefcase"></i></div>
                    <div class="vertical-timeline-content">
                        <h2>总经理审批</h2><p>${content}</p>
                        <a href="#" class="btn btn-sm btn-primary" onclick="onClickOption(3)"> 审核操作</a>
                        <span class="vertical-date">
                         <small>${datetime}</small>
                     </span>
                    </div>
                </div>

                <div class="vertical-timeline-block">
                    <div class="vertical-timeline-icon yellow-bg">
                        <i class="fa fa-phone"></i>
                    </div>

                    <div class="vertical-timeline-content">
                        <h2>审批结束</h2>
                        <p>给李四打电话分配本月工作任务</p>
                        <span class="vertical-date">昨天 <br><small>2月2日</small></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<block th:include="include :: footer" />
<!--请假脚本-->
<script th:src="@{/js/leave.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script>

    //请假id
    var id = $("input[name=id]").val();
    var userName = $("input[name=userName]").val();

  var content =   $("#divstep1").html().replaceAll("${content}",
        userName+"发起的请假，从:"+ $("input[name=startTime]").val()+" 到：" + $("input[name=endTime]").val());
    $("#divstep1").html(content);


    //标题
    $("#title").html(userName+"发起的请假,当前节点：??");

    //获取当前url路径：
    var href = window.location.href;
    console.log("进入当前页面href="+href+",请假id="+id);

    layer.msg("进入当前页面href="+href+",请假id="+id);


    //yanruTODO自己的业务
    function onClickOption(typeNum) {
        console.log("点击操作类型="+typeNum+"，第一步?"+(typeNum==1)+",第二步？"+(typeNum==2)+",第三步？"+(typeNum==3));
        layer.msg("点击操作类型="+typeNum+"，第一步?"+(typeNum==1)+",第二步？"+(typeNum==2)+",第三步？"+(typeNum==3));


        var data = {};
        data.id = id;
        data.userId = typeNum;//操作类型
        $.operate.save(  "/system/leave/complete", data);// $('#form-leave-add').serialize());
    }


    $(document).ready(function(){
        $('#lightVersion').click(function(event) {
            event.preventDefault()
            $('#ibox-content').removeClass('ibox-content');
            $('#vertical-timeline').removeClass('dark-timeline');
            $('#vertical-timeline').addClass('light-timeline');
        });
        $('#darkVersion').click(function(event) {
            event.preventDefault()
            $('#ibox-content').addClass('ibox-content');
            $('#vertical-timeline').removeClass('light-timeline');
            $('#vertical-timeline').addClass('dark-timeline');
        });
    });

</script>
</body>
</html>
